
<template>
    <el-dialog :model-value="dialogVisible" :title="dialogTitle" width="40%" @close="handleClose">
        <el-form ref="formRef" :model="form" label-width="100px" :rules="rules">
            <el-form-item label="用户名" prop="nick">
                <el-input v-model="form.nick" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="选择影院" prop="cinemaId" v-if="props.dialogTitle === '新增用户'">
                <el-cascader v-model="unitArr" :props="ps" @change="handleChange" placeholder="请选择影院" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, defineEmits, defineProps, watch } from 'vue'
import { addCinemaManager, editCinemaManager } from "../../../../../api/user"
import { getRegionVOByLevel, loadRegionVOByPid } from '../../../../../api/region'
import { ElMessage, FormInstance } from 'element-plus'

interface region {
    id: number
    name: string
    level: number
    mername: string
    tag?: string
    hasChildren?: boolean
    children?: region[]
}

interface ICinemaForm {
    userId: number
    nick: string
    phone: string
    id: number   //这是unit_id
}

let id = 0
const ps: object = {
    lazy: true,
    lazyLoad(node: any, resolve: any) {
        const { level } = node
        if (level == 0) {
            getRegionVOByLevel({ id: 1 }).then((res: any) => {
                if (res.code == 200) {
                    let dataArr: any[] = res.data.map((item: any) => {
                        return {
                            value: item.id,
                            label: item.name,
                            leaf: item.level >= 4,
                        }
                    })
                    resolve(dataArr)
                } else {
                    ElMessage.error("获取地区信息失败")
                }
            })
        } else {
            loadRegionVOByPid({ id: node.data.value }).then((res: any) => {
                let dataArr: any[] = resolve(res.data.map((item: region) => {
                    return {
                        value: item.id,
                        label: item.name,
                        leaf: item.level >= 4,
                    }
                }))
                resolve(dataArr)
            })
        }
    },
}

const handleChange = (value: any) => {
    console.log(form);
}
const unitArr = ref<number[]>([])

const formRef = ref<FormInstance>()
let form: ICinemaForm = reactive({
    userId:0,
    nick: '',
    phone: '',
    id: 0
})

const rules = reactive({
    nick: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
    ],
})

const props = defineProps({
    dialogTitle: {
        type: String,
        default: '',
        required: true
    },
    dialogTableValue: {
        type: Object,
        default: () => { }
    }
})

let dialogVisible = ref(true)

const emits = defineEmits(['update:modelValue', 'initUserList'])
const handleClose = () => {
    emits('update:modelValue', false)
}
const handleConfirm = () => {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            if(props.dialogTitle === '新增用户')  {
                if(unitArr.value.length == 0) return ElMessage.error("请选择地区")
                debugger
                form.id = unitArr.value[unitArr.value.length - 1]
                await addCinemaManager(form).then((res:any) => {
                    if(res.code == 200) {
                       ElMessage.success("新增用户成功")
                    }else{
                       ElMessage.error("新增用户失败")
                    }
                })
                emits('initUserList')
            }else {
                form.userId = props.dialogTableValue.userId
                await editCinemaManager(form).then((res:any) => {
                    if(res.code == 200) {
                       ElMessage.success("编辑用户成功")
                    }else{
                       ElMessage.error("编辑用户失败")
                    }
                })
                emits('initUserList')
            }
            handleClose()
        } else {
            console.log('error submit!!')
            return false
        }
    })
}

watch(() => props.dialogTableValue, () => {
    console.log('1', props.dialogTableValue);
    debugger
    (form as any) = props.dialogTableValue
}, { deep: true, immediate: true })

</script>
<style lang='scss' scoped>

</style>